<template>
    <div class="store-goods">
        <span class="buy-icon" v-if="!biggerSwiper">
            <span class="width-height-full displayBlock positionR">
                <router-link class="buy-icon-img" to="/order/cart">
                    <img class="buy-icon-img" @click="" src="../../assets/images/cart/buy_icon.png" alt="">
                </router-link>
                <span class="cart-number" v-if="cartGoodsLength">{{cartGoodsLength}}</span>
            </span>
        </span>
        <div class="no-data-wrap" v-if="(Array.isArray(storeGoodsMsg.list) && storeGoodsMsg.list.length == 0) || (Object.keys(storeGoodsMsg).includes('list') && !storeGoodsMsg.list)">
            <v-no-data :noDataProps="{text:'暂无内容哦～',imgUrl:staticImageUrl('/images/look/no_comment_list1.png')}"></v-no-data>
        </div>
        <full-img-video-swiper
                v-else-if="biggerSwiper && storeGoodsMsg && storeGoodsMsg.list && storeGoodsMsg.list.length > 0"
                :swiperContentProp="storeGoodsSwiper"
                ref="fullImgVideoSwiper"
                @onTransitionEnd="onTransitionEnd"
        >
            <div slot="swiperIn" slot-scope="swiperItem">
                <div v-if="swiperItem.swiperItem">
                    <goods-msg v-if="storeGoodsBox[swiperItem.index] && storeGoodsBox[swiperItem.index].isShow"
                               ref="goodsBox"
                               @closeGoodsBox="closeGoodsBox(swiperItem.index)"
                               @buyNow="buyNow"
                               @addCart="addCart"
                               @showGoodsDetail="showGoodsDetailFn"
                               :goodsMsgProp="storeGoodsBox[swiperItem.index].storeGoodsBoxMsg"
                    ></goods-msg>
                    <!--小球飞入效果-->
                    <transition name="smallBall"
                                @enter="ballEnter(swiperItem.swiperItem,swiperItem.index)">
                        <!-- v-if="boxItem.needSmallBall && showBallIndex == boxKey"-->
                        <img class="buy-item-img small-ball positionAbCenter" ref="needSmallBall" v-if="showBall && swiperIndex == swiperItem.index" :src="swiperItem.swiperItem.images[0] || swiperItem.mediaContents[0].coverImg" />
                    </transition>
                    <user-handle-icons
                            ref="shareCollectSpeak"
                            v-if="shareMsg(swiperItem.swiperItem,swiperItem.index) && Object.keys(shareMsg(swiperItem.swiperItem,swiperItem.index)).length > 0"
                            :rtCommontProps="shareMsg(swiperItem.swiperItem,swiperItem.index)"
                            :commentListProps="commentListProps"
                            :discountList="discountListProp"
                            :goodsDetailProps="goodsDetailProps"
                            @getUserMainComment="getUserMainComment"
                            @getSubCommentList="getSubCommentList"
                            @doComment="doComment"
                            @isLike="isLike"
                            @closeCommentCB="bottomFloor=true"
                            @showShare="$emit('showShare')"
                            @toCart="toCart"
                            @isBigger="isBigger"
                    >
                    </user-handle-icons>
                </div>
            </div>
        </full-img-video-swiper>
        <div v-else-if="!biggerSwiper && storeGoodsMsg && storeGoodsMsg.list && storeGoodsMsg.list.length > 0" class="goods-boxs-wrap">
            <goods-boxs ref="goodsBoxs"
                        :goodsBoxsProp="dealGoodsBoxItem(storeGoodsMsg.list)"
                        @clickItem="clickItem"
                        @updateGoodsMsg="updateGoodsMsg"
                        @finishAnimation="finishAnimation"
                        @addCart="addCart"></goods-boxs>
        </div>
        <div class="blur-img" v-if="!biggerSwiper && storeGoodsMsg && storeGoodsMsg.list && storeGoodsMsg.list.length > 0" :style="{'background-image':'url('+ storeGoodsMsg.list[0].images[0] +')'}"></div>
        <!--商品详情-->
        <goods-detail
                v-if="showGoodsDetail"
                :goodsDetailProps="goodsDetailProps"
                ref="goodsDetail"
                @buyNow="buyNow"
                @addCart="addCart"
                @closeGoodsDetail="showGoodsDetail=false"
                @clickBoxItem="linkToStore"></goods-detail>
        <!--显示选择商品款式的弹出框-->
        <goods-specification
                ref="goodsSpecification"
                v-if="showGoodsStyle"
                :goodsSpecificationProps="goodsSpecificationMsg"
                @addCart="addCart"
                @buyNow="buyNow">
        </goods-specification>
        <slide-left :slideLeftProp="slideLeft"
                    @closeSlideBottom="closeSlideBottom">
            <div slot="slideContent">
                <goods-menus
                             :goodsMsgListProp="storeGoodsMsg.list"
                             @choiseClassify="choiseClassify"
                             @toSwiperIndex="toSwiperIndex"
                             :goodsClassifyListProp="goodsClassifyList">
                </goods-menus>
            </div>
        </slide-left>
        <bottom-floor v-if="false && bottomFloor && goodsClassifyList && goodsClassifyList.length > 0 && storeGoodsMsg && storeGoodsMsg.list && storeGoodsMsg.list.length > 0"
                      :goodsMsgListProp="storeGoodsMsg.list"
                      @choiseClassify="choiseClassify"
                      @toSwiperIndex="toSwiperIndex"
                      :goodsClassifyListProp="goodsClassifyList"></bottom-floor>
    </div>
</template>

<script>
    import FullImgVideoSwiper from "../../components/commonActModel/panoramaVideoSwiper/FullImgVideoSwiper";
    import common from '../../components/commonMethods/common'
    import {mapState} from 'vuex';
    import GoodsBox from '../../components/commonComponents/boxItem/GoodsBox';
    common.iosAutoplay()
    export default {
        name: "StoreGoods",
        props:{
            storeGoodsMsgProp:{/*商品信息*/
                type:Object
            },
            commentListProps:{
                type:Object
            },
            rtCommontProps:{
                type:Object
            },
            discountListProp:{
                type:Array
            }
        },
        data(){
            return{
                storeId:'',
                rtCommontPropsChange:{},
                swiperIndex:0,
                goodsSpecificationMsg:{},//多款的弹出框数据
                showGoodsDetail:false,//商品详情弹框
                showGoodsStyle:false,//购物车选项弹框
                bottomFloor:true,//底部的商品分类
                slideMenus:true,//侧边栏的商品分类
                goodsDetailProps:{},//商品详情
                biggerSwiper:false,//是否使用大图
                slideSmallShow:false,
                slideLeft:{},
                showBall:false,//展示小球飞入效果
                commentList:{
                },//重造commentList
                storeGoodsSwiper:{},
                storeGoodsBox:[
                    // {
                    //     isShow:false,
                    //     storeGoodsBoxMsg:{},
                    //
                    // }
                ],
                storeGoodsMsg:{
                    // "totalPages": 2,//总页数
                    // "totalCount": 6,//总条数
                    // "curPage": 1,//当前页数
                    // "classId":0,//分类
                    list:[
                        // {
                        //     "itemId": 514,                     //----------商品的id
                        //     "itemTitle": "大大咧咧",            //--------商品名称
                        //     "images": [                 //-----------头部轮播图片
                        //         "https://3333333335.jpg",
                        //         "https://3453453445.jpg"
                        //     ],
                        //     "currencyType": 0,
                        //     "currency": "￥",
                        //     "markStr": "砍价",            //------------活动标示文字
                        //     "price": "59.5",            //----------商品价格
                        //     "buyerNum": 5,               //------------已购买人数
                        //     "hadLiked": false,          //------------对应商品是否点赞
                        //     "dataInfo": {
                        //         "commentedNum": 0,        //--------评论数量
                        //         "visitNum": 0,            //--------访问数量
                        //         "shareNum": 0,            //--------分享数量
                        //         "likeNum": 0              //--------点赞数量
                        //     },
                        //     "add2Cart":true,          //------------商品是否已经加入购物车
                        //     "userCartItemNum": 2,     //---------用户购物车商品数量
                        //     "itemCode": "123asd",           //------------商品货号
                        //     "quantity": 188,          //------------商品总库存
                        //     "saleMode": 0,          //------------售出方式 0-单款  1-多款
                        //     "maxBuyNum": 10,         //------------个人可购买的最大数量(单款有效)
                        //     "maxWarn": "个人限购10件",          //------------超过最大购买数时的预警文案(单款有效)
                        //     "itemServerals":[           //--------多款信息
                        //         {
                        //             "styleName":"A款",             //-----------款名
                        //             "styleImg":"https://3333333335.jpg",            //-----------款式图
                        //             "price":"18.9",         //-----------售价
                        //             "quantity": 14,         //-----------款库存，如果为0，置灰
                        //             "maxBuyNum": 10,          //------------个人可购买的最大数量
                        //             "maxWarn": "个人限购10件",          //------------超过最大购买数时的预警文案
                        //         }
                        //     ]
                        //     "curItemNumInCart": 1,//------------用户购物车中该商品的数量
                        // }
                    ]
                },
                /*由于swiper里面不能太多swiper ，所以要把swiper控制在10个以内，暂时不用*/
                // swiperStoreGoodsMsg:{
                // },
                goodsClassifyList:[],
            }
        },
        created(){
            this.storeId = this.$route.query.storeId || 0;
            this.getGoodsClassify();
        },
        mounted(){
            let that = this;
            that.storeGoodsMsg = Object.assign({},that.storeGoodsMsg,that.storeGoodsMsgProp);
            that.rtCommontPropsChange = Object.assign({},that.rtCommontPropsChange,that.rtCommontProps);
            if(that.storeGoodsMsg && that.storeGoodsMsg.list && that.storeGoodsMsg.list.length > 0){
                this.dealStoreMsg(that.storeGoodsMsg);
            }
            if(that.storeGoodsMsg.list && that.storeGoodsMsg.list.length > 0){
                for(let value in that.storeGoodsMsg.list){
                    that.goodsBox(that.storeGoodsMsg.list[value],value);
                }
            }
            let notShowClassify = false;
            /*是否显示分类这两个字*/
            let classifyStorage = window.localStorage.getItem('notShowClassify') ? true : false;
            if( classifyStorage ){
                notShowClassify = true;
            }else{
                window.localStorage.setItem('notShowClassify','false');
                notShowClassify = false;
            }
            this.slideLeft = Object.assign({},this.slideLeft,{bordShow:false, text:notShowClassify ? '' : '分类'})
            /*保证购物车的动画是从下往上滑动的,这里修复第二章图不滑动的bug*/
            /*获取购物车信息*/
            this.$store.dispatch('initCartModuleMsg');
            this.$store.commit('updateCartNumber');
        },
        computed:{
            ...mapState({
                cartGoodsLength:state=>state.api.cartObj.cartGoodsLength,
            }),
            cartModuleMsg(){
                return this.$store.getters.getCartModuleMsg;
            },
            // cartGoodsLength(){
            //     // return this.$store.getters.getCartObj().cartGoodsLength;
            // },
        },
        methods:{
            shareMsg(obj,index){
                let that = this;
                let temp = {
                    dataInfo:obj.dataInfo,
                    hadLiked:obj.hadLiked,
                    mediaContents:obj.mediaContents,
                    paginationType:2,
                    mediaType:obj.mediaType,
                    nowSwiperIndex:1,
                    id:obj.itemId,
                    isNeedContentShare:false,
                    storeId:that.rtCommontProps.storeId || 0,
                    latitude:that.rtCommontProps.latitude,
                    longitude:that.rtCommontProps.longitude,
                    isNeedServer:that.rtCommontProps.isNeedServer,
                    showBiggerIcon: true,
                    showBuyIcon: true,
                };
                /*"storeId": 105,
                    "id":0,*/
                return temp;
            },
            commontMsg(obj){
                let that = this;
                let tempArray = []
                if(Array.isArray(obj) && Array.length > 0){
                    obj.forEach((value,index)=>{
                        tempArray.push(that.shareMsg(value,index));
                    })
                }
                return tempArray
            },
            initCommentList(val){
                this.commentList = {

                }
            },
            buyNow(obj){
                let that = this;
                let tempArray = [];
                if(obj){
                    if(Array.isArray(obj)){
                        obj.forEach((value,index)=>{
                            let tempObj = {}
                            tempObj = {
                                itemId:value.itemId,
                                styleName:value.serveralType || null,
                                buyNum:value.number || 1,
                            }
                            tempArray.push(tempObj);
                        })
                    }else{
                        let tempObj = {
                            itemId:obj.itemId,
                            styleName:obj.serveralType || null,
                            buyNum:obj.number || 1,
                        };
                        tempArray.push(tempObj);
                    }

                    that.storeGoodsMsg.list.forEach((value,index)=>{
                        /*不管是单款还是多款都直接拉出弹框*/
                        if(value.itemId == obj.itemId){
                            if(obj.openAlert){
                                that.openGoodsSpecification(obj);
                            }else{
                                that.$store.commit('sureOrder',tempArray);
                                // that.$router.push('/order/sure');
                                window.location.href = '/order/sure'
                            }
                        }
                    })
                }
                // that.openGoodsSpecification()
            },
            openGoodsSpecification(obj){
                if(obj.belongSwiperIndex){
                    this.goodsSpecificationMsg = this.storeGoodsMsg.list[obj.belongSwiperIndex];
                }else if(this.swiperIndex || this.swiperIndex == 0){
                    this.goodsSpecificationMsg = this.storeGoodsMsg.list[this.swiperIndex];
                }
                this.showGoodsStyle = true;
                setTimeout(()=>{
                    this.$refs.goodsSpecification.opeSlideBottom();
                },100)
            },
            addCart(obj){
                /*如果是单款直接加入购物车，如果是多款要选择款式*/
                let that = this;
                if(obj){
                    for(let key in that.storeGoodsMsg.list){
                        if(that.storeGoodsMsg.list[key].itemId == obj.itemId){
                            if(that.storeGoodsMsg.list[key].saleMode == 0){
                                //单款
                                that.addCartAjax(obj);
                            }else if(that.storeGoodsMsg.list[key].saleMode == 1){
                                /*如果没有选择款式*/
                                if(!obj.serveralType){
                                    //多款打开弹出框
                                    this.openGoodsSpecification(obj);
                                }else{
                                    //加入购物车
                                    that.addCartAjax(obj);
                                }
                            }
                        }
                    }
                }
            },
            addCartAjax(obj){
                let that = this;
                let url = `${that.NW_API_API_LOCALE_VERSION}/shopping/cart/add/item`;
                let dealIndex = 0;
                let params={
                    "userId":that.userId,          //-------用户ID
                    "storeId":that.storeId,          //-------店铺ID
                    "itemId":obj.itemId,           //-------商品ID
                    "serveralType":obj.serveralType || null,     //-------款式名字 （购买款式，单款则不传）
                    "buyNum":obj.buyNum || 1              //-------购买数量（不能为0）
                };
                that.xurl.postDataJsonLoading(url,params).then((data)=>{
                    if(data.success){
                        that.$root.$emit('toast',{'msg':'加入购物车成功'})
                        if(obj && obj.needAddAnmation && this.$refs.goodsBoxs && this.$refs.goodsBoxs.showSmallBall){
                            this.$refs.goodsBoxs.showSmallBall(obj);
                        }else{
                            this.showBall = true;
                        }
                        if(obj.belongSwiperIndex){
                            dealIndex = obj.belongSwiperIndex;
                        }else if(obj.itemId){
                            that.storeGoodsBox.forEach((value,index)=>{
                                if(value.storeGoodsBoxMsg.itemId == obj.itemId){
                                    dealIndex = index;
                                }
                            })
                        }
                        that.storeGoodsBox[dealIndex].storeGoodsBoxMsg.add2Cart = true;
                        /*加入购物车之后，后台有接口加入购物车之后改变购物车商品的个数*/
                        let url = `${that.NW_API_API_LOCALE_VERSION}/shopping/cart/user/${this.userId}/item/number`;
                        this.xurl.get(url).then((data)=>{
                            that.storeGoodsBox.forEach((value,index)=>{
                                if(value.storeGoodsBoxMsg.add2Cart){
                                    that.storeGoodsBox[index].storeGoodsBoxMsg.userCartItemNum = data.result;
                                }
                            });
                            that.storeGoodsBox[dealIndex].storeGoodsBoxMsg = Object.assign({},that.storeGoodsBox[dealIndex].storeGoodsBoxMsg)
                            if(that.$refs.goodsBox && that.$refs.goodsBox[dealIndex] && that.$refs.goodsBox[dealIndex].goodsBox){
                                that.$refs.goodsBox[dealIndex].goodsBox = Object.assign({},that.$refs.goodsBox[dealIndex].goodsBox)
                            }
                        });
                        if(this.$refs.goodsSpecification){
                            this.$refs.goodsSpecification.closeSlideBottom();
                        }
                    }else if(data.errMsg){
                        that.$root.$emit('toast',{'msg':data.errMsg})
                    }else{
                        that.$root.$emit('toast',{'msg':'加入购物车失败'})
                    }
                })
            },
            linkToStore(){
            },
            dealStoreMsg(obj) {
                let that = this;
                let tempList = [];
                let tempStoreMsg = {};
                let promotionInfo = {};
                let promotionFloats = [];
                if(Array.isArray(obj.list) && obj.list.length > 0){
                    obj.list.forEach((value, index) => {
                        tempStoreMsg = {
                            "belongStoreInfo":{
                                storeId:that.storeId,
                            },
                            "images":value.images,
                            "hadLike": value.hadLike,
                            "itemId": value.itemId,
                            "mediaType": value.mediaType,
                            "mediaContents": value.mediaContents,
                            "poster": value.poster,
                            "dataInfo": value.dataInfo,
                        }
                        tempList.push(tempStoreMsg);
                    })
                    let tempObj = {
                        pageSize:tempList.length,
                        notShow:false,
                        initialSlide:0,
                        headerMsg: '',
                        list:tempList,
                    }
                    this.storeGoodsSwiper = Object.assign({},this.storeGoodsSwiper,tempObj);
                }
            },
            /*获取商品分类*/
            getGoodsClassify(){
                let url = `${this.NW_API_API_LOCALE_VERSION}/item/class/store/${this.storeId} `;
                this.xurl.get(url).then((data)=>{
                    if(data.success){
                        this.goodsClassifyList = data.list;
                    }else if(data.errMsg){
                        this.$root.$emit('toast', {msg: data.errMsg});
                    }else{
                        console.log('获取商品分类失败')
                    }
                })
            },
            choiseClassify(classId,index){
                this.$emit('initGoodsMsg',{classId,notHref:true});
            },
            nowIndex(index){
                /*swiper滑动时修改swiper的下标*/
                let that = this;
                that.$refs.shareCollectSpeak[that.swiperIndex].nowIndex(index);
            },
            /*商品详情的弹出框*/
            showGoodsDetailFn(itemId){
                let that = this;
                let url= `${this.NW_API_API_LOCALE_VERSION}/item/${itemId}/detail`;

                this.xurl.getLoading(url).then((data)=>{
                    if(data.success){
                        let tempstoreGoodsObj = this.storeGoodsMsg;
                        for(let value of tempstoreGoodsObj.list){
                            if(value.itemId == itemId){
                                let urlCommont = `${this.NW_API_API_LOCALE_VERSION}/item/${itemId}/buyerShow?pageSize=10&pageNum=1`;
                                let tempObj = {
                                    itemId:itemId,
                                    storeId:that.storeId,
                                    title:value.itemTitle,
                                    currency:value.currency || '￥',
                                    price:value.price,//商品价格
                                    description:value.markStr,//商品描述
                                    imgList:value.images,//商品详情轮播图的图片，
                                };
                                this.goodsDetailProps = tempObj;
                                this.showGoodsDetail = true;
                                /*TODO 买家秀和为你推荐现在接口没有先放这里*/
                                // this.xurl.get(urlCommont).then((data)=>{
                                //     if(data.success){
                                //         let buyTemp = {};
                                //         let tempList = [];
                                //         if(Array.isArray(data.list) && data.list.length > 0){
                                //             for(let value of data.list){
                                //                 buyTemp={
                                //                     storeId:that.storeId,
                                //                     type:2,
                                //                     itemId:value.itemId,//商品id
                                //                     currency:"￥",/*金币的符号*/
                                //                     url:value.mediaContents.url,/*@url 图片或者视频的url*/
                                //                     itemTitle:value.comment,/*@description 描述*/
                                //                 };
                                //                 tempList.push(buyTemp);
                                //             }
                                //             tempObj.modlueList=[
                                //                 {
                                //                     title:'买家秀',
                                //                     list:tempList,
                                //                 }
                                //             ]
                                //         }
                                //
                                //     }
                                //     this.goodsDetailProps = tempObj;
                                //     this.showGoodsDetail = true;
                                // });
                                break;
                            }
                        }

                    }else if(data.errMsg){
                        this.$root.$emit('toast', {msg: data.errMsg});
                    }else{
                        console.log('获取商品详情信息失败')
                    }
                });
            },
            onTransitionEnd(index){
                let that = this;
                index = index.index;
                if(index > -1 && that.storeGoodsBox && that.storeGoodsBox[index]){
                    for(let value in that.storeGoodsBox){
                        that.storeGoodsBox[value].isShow =false;
                    }
                    let storeGoodsBox = that.storeGoodsBox[index];
                    that.swiperIndex = index;
                    storeGoodsBox.isShow = true;
                    that.storeGoodsBox.splice(index,1,storeGoodsBox)
                    setTimeout(()=>{
                        this.$refs.fullImgVideoSwiper.swiperSlideEnd(index)
                    })
                }
            },
            closeGoodsBox(index){
                this.storeGoodsBox[index].isShow = false;
                this.storeGoodsBox.splice(index,1,this.storeGoodsBox[index]);
            },
            getUserMainComment(obj){
                this.bottomFloor = false;
                this.$emit('getUserMainComment',obj)
            },
            getSubCommentList(obj){
                this.$emit('getSubCommentList',obj)
            },
            doComment(obj){
                this.$emit('doComment',obj)
            },
            isLike(obj){
                this.$emit('isLike',obj)
            },
            toSwiperIndex(key){
                this.$refs.mySwiper.swiper.slideTo(key,500,false);//切换到第一个slide，速度为1秒
            },
            goodsBox(obj,index){
                let that = this;
                let tempObj = {
                    isShow:true,
                    storeGoodsBoxMsg:{
                        storeId:that.$route.query.storeId,
                        belongSwiperIndex:index,
                        title:obj.itemTitle,
                        currency:obj.currency,
                        price:obj.price,
                        itemId:obj.itemId,
                        userCartItemNum:obj.userCartItemNum,//用户购物车商品数量
                        add2Cart:obj.add2Cart,//商品是否已经加入购物车
                    },
                };
                this.storeGoodsBox.splice(index,1,tempObj);
            },
            clickItem(boxItem,boxKey){
                let that = this;
                this.storeGoodsMsg.list.forEach((value,index)=>{
                    if(boxItem.itemId == value.itemId){
                        that.storeGoodsSwiper.initialSlide = index;
                    }
                })
                this.biggerSwiper = true;
            },
            isBigger(boolean){
                this.biggerSwiper = boolean;
            },
            toCart(boolean){
                this.$router.push({path:'/order/cart'});
            },
            dealGoodsBoxItem(goodsList){
                let storeId = this.$route.query.storeId;
                let list = [];
                let tempObj = {};
                goodsList.forEach((value,index)=>{
                    tempObj = {
                        storeId:storeId,
                        type:4,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                        itemId:value.itemId,//商品id
                        currency:value.currency,/*金币的符号*/
                        url:value.images[0],/*@url 图片或者视频的url*/
                        itemTitle:value.itemTitle,/*@description 描述*/
                        price:value.price,/*@description 价格*/
                        buyerNum:value.curItemNumInCart,/*@buyerNum 已购买件数*/
                        titleOneLine:true,//标题一行显示
                        needSmallBall:true,
                        // time:0,/*@time时间，当type为2时填写*/
                        // userInfo:{header:'',name:'',like:'',num:'',url:'',selectUrl:'',notSelectUrl:''},
                    }
                    list.push(tempObj);
                });
                return {
                    list:list,
                    classId:this.storeGoodsMsg.classId,
                    totalPages:this.storeGoodsMsg.totalPages,
                    // isShowMore:goodsList.length > 6,/*@isShowMore 是否显示查看更多 ，不需要显示查看更多*/
                }
            },
            closeSlideBottom(boolean){
                let dom = ''
                if(document.getElementsByClassName('box-item')){
                    dom = document.getElementsByClassName('box-item')
                }
                if(boolean){
                    this.slideSmallShow = false;
                    console.log(dom,'dom')
                    setTimeout(()=>{
                        if(dom && dom.length > 0){
                            dom[0].style.transform = 'scale(1)';
                            dom[0].style.height = 'auto';
                        }
                    },10)
                }else{
                    this.slideSmallShow = true;
                    setTimeout(()=>{
                        if(dom && dom.length > 0){
                            dom[0].style.transform = 'scale(0.77)';
                            dom[0].style.height = 0.77 * Math.ceil(this.storeGoodsMsg.list.length / 2) * 2.45 + 'rem';
                        }
                    },10)
                }
            },
            finishAnimation(boxItem){
                let that = this;
                this.storeGoodsMsg.list.forEach((value,index)=>{
                    if(boxItem.itemId == value.itemId){
                        that.storeGoodsMsg.list[index].curItemNumInCart ++;
                    }
                    that.storeGoodsMsg.list.splice(index,1,that.storeGoodsMsg.list[index]);
                })
                this.$store.dispatch('initCartModuleMsg');
                this.$store.commit('updateCartNumber');
            },
            updateGoodsMsg(obj,isMore){
                this.$emit('initGoodsMsg',obj);
            },
            ballEnter(msg,index){
                let that = this;
                this.$refs.needSmallBall.style.transition = 'all 500ms';
                this.$refs.needSmallBall.style.transformOrigin = 'center center';
                setTimeout(()=>{
                    this.$refs.needSmallBall.style.width = '.28rem';
                    this.$refs.needSmallBall.style.height = '.28rem';

                    let iconPos = this.getDomLeaveScreen(document.getElementsByClassName('buy-icon')[0]);
                    let iconOffsetX = iconPos.left;
                    let iconOffsetY = iconPos.top;

                    let domPos = this.getDomLeaveScreen(that.$refs.needSmallBall);
                    let domX = domPos.left;
                    let domY = domPos.top - this.swiperIndex * document.documentElement.clientHeight;
                    let domClientWidth = document.getElementsByClassName('buy-icon')[0].clientWidth;
                    let domClientHeight = document.getElementsByClassName('buy-icon')[0].clientHeight;

                    let domLeft = iconOffsetX - domX - 2 * domClientWidth;//这里不应该乘以2，但是由于购物袋和小球大小一样所以用乘以2
                    let domTop = iconOffsetY - domY - 2 * domClientHeight;
                    setTimeout(()=>{
                        console.log(this.$refs.needSmallBall,'this.$refs.needSmallBall')
                        this.$refs.needSmallBall.style.transform = 'translate('+domLeft+'px,'+domTop+'px)';
                        setTimeout(()=>{
                            that.showBall = false;
                            that.finishAnimation(msg);
                        },400)
                    },400)
                },10)
            },
        },
        components:{
            'full-height-swiper':()=>import('../../components/commonComponents/swiperComponent/FullHeightSwiper'),
            /*TODO 这是要用swiper和video的形式*/
            'full-img-video-swiper':FullImgVideoSwiper,
            // "full-height-video":()=>import("../../components/commonActModel/video/FullHeightVideo"),
            // "full-pamprama":()=>import("../../components/commonComponents/panorama/Panorama"),
            // 'rt-share-collect-speak':()=>import('../../components/commonActModel/userHandleIcons/RtShareCollectSpeak'),
            'user-handle-icons':()=>import('../../components/commonActModel/userHandleIcons/UserHandleIcons'),
            'slide-left':()=>import('../../components/commonComponents/slideLeft/SlideLeftComponents'),
            'goods-menus':()=>import('./components/goods/GoodsMenus'),
            'goods-box':()=>import('./components/BottomBuyBox'),
            'goods-msg':()=>import('./components/GoodsMsg'),
            'goods-boxs': GoodsBox,
            'goods-detail':()=>import('./components/goods/GoodsDetail'),
            'goods-specification':()=>import('./components/goods/GoodsSpecification'),
            "v-no-data":()=>import("../../components/commonActModel/noData/NoData"),
            'bottom-floor':()=>import('./components/BottomFloor'),
            'wx-share-body': () => import('../../components/wx/WxShareBody'),
        },
        /*FullImgVideoSwiper*/
        watch:{
            storeGoodsMsgProp(val){
                let that = this;
                let storeGoodsMsg = this.storeGoodsMsg;
                this.storeGoodsMsg = Object.assign({},this.storeGoodsMsg,val);
                if(that.storeGoodsMsg.list && that.storeGoodsMsg.list.length > 0){
                    for(let value in that.storeGoodsMsg.list){
                        that.goodsBox(that.storeGoodsMsg.list[value],value)
                    }
                }
                if(that.storeGoodsMsg && that.storeGoodsMsg.list && that.storeGoodsMsg.list.length > 0){
                    this.dealStoreMsg(that.storeGoodsMsg);
                }
            },
            // slideMenus(val){
            //     this.closeSlideBottom(val)
            // }
        }
    }
</script>

<style scoped lang="scss">
    .store-goods{
        width: 100%;
        height: 100vh;
        overflow: hidden;
        /*background-image: -webkit-linear-gradient(rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0)80%,rgba(0,0,0,.3) 100%) ;*/
        /*background-image: linear-gradient(rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0)80%,rgba(0,0,0,.3) 100%) ;*/
    }
    .blur-img{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        filter: blur(40px);
        width: 100%;
        z-index: -1;
    }
    .store-goods /deep/ {
        .no-wcomment{
            z-index: 1;
        }
        .scroll-contain{
            padding: 1rem .11rem 0;
        }
        .slide-bottom-transition,.out-icon{
            background-color: rgba(255,255,255,1);
        }
        .slide-bottom-transition{
            z-index: 1061;
        }
    }
    .no-data-wrap{
        height: 100vh;
    }
    .goods-boxs-wrap{
        padding-top: 1rem;
    }
    .goods-boxs-wrap /deep/ {
        .buy-item-wuser{
            transition: all 300ms;
            overflow: unset;
        }
        .buy-item-img{
            transition: all 300ms;
        }
        .buy-item-wrap{
            overflow: unset;
        }
    }
    .buy-icon{
        position: absolute;
        right: .16rem;
        top: 1.15rem;
        width: .32rem;
        height: .32rem;
        z-index: 1;
    }
    .buy-icon-img{
        width: 100%;
        height: 100%;
    }
    .cart-number{
        position: absolute;
        display: inline-block;
        color: #fff;
        border-radius: .25rem;
        padding: .02rem .02rem;
        background-color: #FF4242;
        left: .15rem;
        transform: scale(0.7);
        top: -.08rem;
        min-width: .15rem;
    }
    .buy-item-img{
        transition: all 300ms;
    }
    .small-ball{
        width: 1.6rem;
        height: 1.6rem;
        transform-origin: center center;
        border-radius: 50%;
        z-index: 1;
    }
</style>